<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张皓然的视频作品集</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --bilibili-blue: #00a1d6;
            --douyin-black: #121212;
            --weibo-red: #e6162d;
            --primary-color: #6a5af9;
            --secondary-color: #d66efd;
            --search-highlight: #ffd700;
            --wechat-green: #07c160;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: linear-gradient(rgba(50, 50, 80, 0.7), rgba(30, 30, 60, 0.8)), 
                        url('https://api.btstu.cn/sjbz/api.php?lx=fengjing&format=images') no-repeat center center fixed;
            background-size: cover;
            min-height: 100vh;
            padding: 40px 20px;
            color: #fff;
            font-family: 'Noto Sans SC', sans-serif;
            position: relative;
            overflow-x: hidden;
            transition: all 0.5s ease;
        }
        
        /* 每日一言样式 */
        .daily-quote {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 1000;
            background: rgba(60, 60, 90, 0.85);
            border-radius: 15px;
            padding: 15px 20px;
            max-width: 300px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }
        
        .daily-quote:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        }
        
        .quote-title {
            font-size: 1rem;
            color: #d66efd;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            font-weight: 600;
        }
        
        .quote-title i {
            margin-right: 8px;
            font-size: 1.1rem;
        }
        
        .quote-content {
            font-size: 0.95rem;
            line-height: 1.5;
            color: #eee;
            margin-bottom: 10px;
            font-style: italic;
        }
        
        .quote-refresh {
            background: transparent;
            border: none;
            color: var(--bilibili-blue);
            cursor: pointer;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            margin-top: 5px;
            transition: color 0.3s;
        }
        
        .quote-refresh:hover {
            color: #ff8ed4;
        }
        
        .quote-refresh i {
            margin-right: 5px;
        }
        
        /* 顶部信息栏样式 */
        .top-info-bar {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 10px;
            background: rgba(60, 60, 90, 0.8);
            padding: 15px 20px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            max-width: 300px;
        }
        
        .current-time {
            font-size: 1.2rem;
            font-weight: 600;
            color: #d66efd;
            text-align: right;
        }
        
        .weather-info {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.95rem;
            color: #eee;
        }
        
        .weather-icon {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .weather-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        
        .weather-details {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        
        .weather-location {
            font-weight: 600;
        }
        
        .weather-temp {
            font-size: 0.9rem;
        }
        
        .header {
            text-align: center;
            margin-bottom: 40px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
            position: relative;
            padding-top: 50px;
        }
        
        .header h1 {
            font-weight: 800;
            font-size: 3.5rem;
            letter-spacing: 3px;
            position: relative;
            display: inline-block;
            padding-bottom: 20px;
            background: linear-gradient(45deg, #6a5af9, #d66efd, #ff8ed4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .header h1:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 180px;
            height: 4px;
            background: linear-gradient(to right, var(--bilibili-blue), #ff3270);
            border-radius: 2px;
        }
        
        .header p {
            font-size: 1.2rem;
            margin-top: 20px;
            opacity: 0.85;
            max-width: 700px;
            margin: 25px auto 0;
            font-weight: 300;
            letter-spacing: 1px;
        }
        
        /* 搜索区域 */
        .search-container {
            max-width: 800px;
            margin: 0 auto 40px;
            position: relative;
        }
        
        .search-box {
            display: flex;
            background: rgba(50, 50, 80, 0.9);
            border-radius: 50px;
            padding: 10px 20px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            border: 1px solid rgba(255,255,255,0.2);
        }
        
        .search-box input {
            flex: 1;
            background: transparent;
            border: none;
            color: white;
            font-size: 1.1rem;
            padding: 10px 15px;
            outline: none;
        }
        
        .search-box button {
            background: var(--bilibili-blue);
            color: white;
            border: none;
            border-radius: 50px;
            padding: 10px 30px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
        }
        
        .search-box button:hover {
            background: #0087b0;
            transform: translateY(-2px);
        }
        
        .search-results {
            color: #ddd;
            font-size: 0.95rem;
            margin-top: 10px;
            padding-left: 20px;
        }
        
        /* 轮播图区域 */
        .carousel-section {
            max-width: 1200px;
            margin: 0 auto 40px;
        }
        
        .carousel {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
            position: relative;
            border: 2px solid rgba(255,255,255,0.2);
        }
        
        .carousel-item img {
            height: 500px;
            object-fit: cover;
            transition: transform 0.5s;
        }
        
        .carousel-item:hover img {
            transform: scale(1.03);
        }
        
        .carousel-caption {
            background: rgba(0, 0, 0, 0.6);
            border-radius: 10px;
            padding: 12px 25px;
            left: 50%;
            transform: translateX(-50%);
            bottom: 20px;
            width: auto;
            max-width: 90%;
            backdrop-filter: blur(5px);
        }
        
        .carousel-caption h5 {
            font-size: 1.4rem;
            font-weight: 600;
            margin: 0;
            color: #ff8ed4;
        }
        
        /* 视频链接区域 */
        .video-links-section {
            max-width: 1200px;
            margin: 0 auto 40px;
        }
        
        .card-panel {
            background: rgba(60, 60, 90, 0.8);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
            padding: 30px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
            overflow: hidden;
        }
        
        .card-panel:before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
            z-index: -1;
        }
        
        .section-title {
            font-size: 1.8rem;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            color: #d66efd;
        }
        
        .section-title i {
            margin-right: 15px;
            color: var(--bilibili-blue);
        }
        
        .video-links {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }
        
        .video-link {
            display: flex;
            align-items: center;
            padding: 0;
            background: rgba(70, 70, 100, 0.8);
            border-radius: 12px;
            transition: all 0.3s ease;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            border: 1px solid rgba(255,255,255,0.2);
        }
        
        .video-link:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.4);
            border-color: rgba(255,255,255,0.3);
        }
        
        .video-thumbnail {
            width: 200px;
            flex-shrink: 0;
            position: relative;
        }
        
        .video-thumbnail img {
            width: 100%;
            height: 120px;
            object-fit: cover;
            display: block;
        }
        
        .video-thumbnail:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(106,90,249,0.4), rgba(214,110,253,0.4));
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .video-link:hover .video-thumbnail:after {
            opacity: 1;
        }
        
        .play-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 2.5rem;
            opacity: 0.8;
            text-shadow: 0 0 15px rgba(0,0,0,0.7);
            z-index: 2;
            transition: all 0.3s;
        }
        
        .video-link:hover .play-icon {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1.1);
        }
        
        .video-info {
            padding: 20px;
            flex-grow: 1;
        }
        
        .video-info h4 {
            font-weight: 700;
            margin-bottom: 10px;
            font-size: 1.3rem;
            color: #6a5af9;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .platform-icons {
            display: flex;
            gap: 8px;
            margin-left: 5px;
        }
        
        .platform-icon {
            font-size: 1.2rem;
            transition: transform 0.3s;
        }
        
        .platform-icon:hover {
            transform: scale(1.2);
        }
        
        .bilibili-icon {
            color: var(--bilibili-blue);
        }
        
        .douyin-icon {
            color: #69c9d0;
        }
        
        .weibo-icon {
            color: var(--weibo-red);
        }
        
        .wechat-icon {
            color: var(--wechat-green);
        }
        
        .video-info p {
            color: #eee;
            margin-bottom: 12px;
            font-size: 1rem;
        }
        
        .video-info a {
            display: inline-block;
            color: #eee;
            background: rgba(80, 80, 110, 0.8);
            padding: 8px 16px;
            border-radius: 30px;
            font-size: 0.9rem;
            text-decoration: none;
            transition: all 0.3s;
            border: 1px solid rgba(255,255,255,0.2);
        }
        
        .video-info a:hover {
            color: white;
            background: var(--bilibili-blue);
            transform: translateX(5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        
        /* 社交媒体和关于作者区域 */
        .social-section {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        /* 社交媒体按钮样式 - 确保所有按钮尺寸一致 */
        .social-buttons {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            justify-content: center;
            margin-top: 30px;
            width: 100%;
        }
        
        .social-btn {
            display: flex;
            align-items: center;
            padding: 18px 35px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 1.2rem;
            transition: all 0.3s ease;
            text-decoration: none;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
            min-width: 220px;
            justify-content: center;
            position: relative;
            overflow: hidden;
            z-index: 1;
            width: 100%; /* 确保所有按钮宽度一致 */
            box-sizing: border-box; /* 包含内边距在宽度内 */
            text-align: center;
        }
        
        .social-btn:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background: rgba(255,255,255,0.2);
            transition: width 0.5s;
            z-index: -1;
        }
        
        .social-btn:hover:before {
            width: 100%;
        }
        
        .social-btn:hover {
            transform: translateY(-7px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
        }
        
        .social-btn i {
            margin-right: 12px;
            font-size: 1.7rem;
        }
        
        .bilibili-btn {
            background: var(--bilibili-blue);
            color: white;
        }
        
        .douyin-btn {
            background: var(--douyin-black);
            color: white;
        }
        
        .weibo-btn {
            background: var(--weibo-red);
            color: white;
        }
        
        /* 微信按钮容器 */
        .wechat-btn-container {
            position: relative;
            width: 100%; /* 确保容器宽度与其他按钮一致 */
        }
        
        /* 微信按钮样式 */
        .wechat-btn {
            background: var(--wechat-green);
            color: white;
            border: none;
            border-radius: 12px;
            font-weight: 600;
            font-size: 1.2rem;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
            min-width: 220px;
            width: 100%; /* 确保宽度100%填充容器 */
            padding: 18px 35px; /* 与其他按钮相同的内边距 */
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            z-index: 1;
            box-sizing: border-box; /* 包含内边距在宽度内 */
        }
        
        .wechat-btn:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background: rgba(255,255,255,0.2);
            transition: width 0.5s;
            z-index: -1;
        }
        
        .wechat-btn:hover:before {
            width: 100%;
        }
        
        .wechat-btn:hover {
            transform: translateY(-7px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
        }
        
        .wechat-btn i {
            margin-right: 12px;
            font-size: 1.7rem;
        }
        
        /* 微信气泡样式 */
        .wechat-popover {
            display: none;
            position: absolute;
            background: white;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            width: 200px;
            text-align: center;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(-10px);
            animation: fadeIn 0.3s ease;
        }
        
        .wechat-popover:after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 10px solid transparent;
            border-top-color: white;
        }
        
        .wechat-qrcode {
            width: 100%;
            border-radius: 8px;
            margin-bottom: 8px;
        }
        
        .wechat-popover-text {
            font-size: 0.8rem;
            color: #888;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
            to { opacity: 1; transform: translateX(-50%) translateY(-10px); }
        }
        
        .wechat-btn-container:hover .wechat-popover,
        .wechat-btn-container:focus-within .wechat-popover {
            display: block;
        }
        
        .about-author {
            margin-top: 40px;
            text-align: center;
        }
        
        .about-author .section-title {
            justify-content: center;
        }
        
        .about-content {
            padding: 20px;
            background: rgba(70, 70, 100, 0.7);
            border-radius: 15px;
        }
        
        .about-content p {
            font-size: 1.1rem;
            line-height: 1.8;
            color: #eee;
        }
        
        .about-icons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }
        
        .about-icons div {
            font-size: 2.5rem;
        }
        
        .footer {
            text-align: center;
            margin-top: 40px;
            color: rgba(255, 255, 255, 0.8);
            font-size: 1rem;
            padding: 15px;
            background: rgba(60, 60, 90, 0.8);
            border-radius: 15px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .footer p {
            margin: 0;
            padding: 10px;
            border-top: 1px solid rgba(255,255,255,0.2);
        }
        
        /* 高亮搜索匹配 */
        .highlight {
            background-color: var(--search-highlight);
            color: #000;
            font-weight: bold;
            padding: 0 3px;
            border-radius: 3px;
        }
        
        /* 播放器按钮 */
        .player-button {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 1000;
            background: var(--bilibili-blue);
            color: white;
            border: none;
            border-radius: 50px;
            padding: 15px 25px;
            font-weight: 600;
            font-size: 1.1rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.4);
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .player-button:hover {
            background: #0087b0;
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
        }
        
        /* 返回顶部按钮 - 现在在音乐按钮上方 */
        .back-to-top {
            position: fixed;
            bottom: 170px; /* 调整位置 */
            right: 30px;
            z-index: 1000;
            background: var(--bilibili-blue);
            color: white;
            border: none;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            font-size: 1.5rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.4);
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
        }
        
        .back-to-top.show {
            opacity: 1;
            visibility: visible;
        }
        
        .back-to-top:hover {
            background: #0087b0;
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
        }
        
        /* 音乐播放器按钮 - 现在在返回顶部按钮下方 */
        .music-player-btn {
            position: fixed;
            bottom: 100px; /* 调整位置 */
            right: 30px;
            z-index: 1000;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--bilibili-blue);
            color: white;
            border: none;
            box-shadow: 0 5px 15px rgba(0,0,0,0.4);
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            opacity: 1;
            visibility: visible;
        }
        
        .music-player-btn:hover {
            background: #0087b0;
            transform: translateY(-5px) scale(1.1);
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
        }
        
        .music-player-btn.playing .fa-play {
            display: none;
        }
        
        .music-player-btn.playing .fa-pause {
            display: block;
        }
        
        .music-player-btn .fa-pause {
            display: none;
        }
        
        .music-player-btn .fa-play {
            display: block;
        }
        
        /* 音乐播放器按钮动画效果 */
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(0, 161, 214, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(0, 161, 214, 0); }
            100% { box-shadow: 0 0 0 0 rgba(0, 161, 214, 0); }
        }
        
        .music-player-btn.playing {
            animation: pulse 2s infinite;
        }
        
        /* 音乐播放器按钮提示 */
        .music-tooltip {
            position: absolute;
            bottom: 70px;
            right: 0;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 0.8rem;
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }
        
        .music-player-btn:hover .music-tooltip {
            opacity: 1;
        }
        
        /* 音乐控制卡片样式 */
        .music-control-card {
            position: fixed;
            bottom: 170px;
            right: 30px;
            z-index: 1000;
            background: rgba(60, 60, 90, 0.95);
            border-radius: 15px;
            padding: 20px;
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            width: 300px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
            transition: all 0.3s ease;
        }
        
        .music-control-card.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        .music-control-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .music-control-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #d66efd;
        }
        
        .close-music-card {
            background: transparent;
            border: none;
            color: rgba(255, 255, 255, 0.7);
            font-size: 1.2rem;
            cursor: pointer;
            transition: color 0.3s;
        }
        
        .close-music-card:hover {
            color: white;
        }
        
        .music-info {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .music-cover {
            width: 60px;
            height: 60px;
            border-radius: 10px;
            background: linear-gradient(45deg, #6a5af9, #d66efd);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
        }
        
        .music-details {
            flex: 1;
        }
        
        .music-name {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .music-artist {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.7);
        }
        
        .music-controls {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .control-buttons {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
        }
        
        .control-btn {
            background: transparent;
            border: none;
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .control-btn:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .play-pause-btn {
            background: var(--bilibili-blue);
            width: 50px;
            height: 50px;
            font-size: 1.5rem;
        }
        
        .play-pause-btn:hover {
            background: #0087b0;
            transform: scale(1.05);
        }
        
        .volume-control {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .volume-icon {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1.1rem;
        }
        
        .volume-slider {
            flex: 1;
            -webkit-appearance: none;
            height: 5px;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.2);
            outline: none;
        }
        
        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: var(--bilibili-blue);
            cursor: pointer;
        }
        
        .volume-slider::-moz-range-thumb {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: var(--bilibili-blue);
            cursor: pointer;
            border: none;
        }
        
        /* 播放器模态框样式 - 毛玻璃效果增强 */
        .player-modal .modal-content {
            background: rgba(70, 70, 100, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 20px;
            color: white;
            min-height: 70vh;
            max-height: 85vh;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
        }
        
        .player-modal .modal-header {
            border-bottom: 1px solid rgba(255,255,255,0.2);
            padding: 20px 25px;
            background: rgba(80, 80, 120, 0.7);
            backdrop-filter: blur(10px);
        }
        
        .player-modal .modal-title {
            color: #d66efd;
            font-size: 1.5rem;
            font-weight: 600;
        }
        
        .player-modal .btn-close {
            filter: invert(1);
            opacity: 0.7;
        }
        
        .player-modal .btn-close:hover {
            opacity: 1;
        }
        
        .player-modal .modal-body {
            padding: 0;
            display: flex;
            height: calc(85vh - 80px);
        }
        
        /* 播放列表样式 */
        .playlist-container {
            width: 35%;
            border-right: 1px solid rgba(255,255,255,0.2);
            overflow-y: auto;
            padding: 20px;
            background: rgba(70, 70, 100, 0.7);
            backdrop-filter: blur(10px);
        }
        
        .playlist-item {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            margin-bottom: 12px;
            background: rgba(80, 80, 120, 0.7);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s;
            border: 1px solid rgba(255,255,255,0.1);
            backdrop-filter: blur(5px);
        }
        
        .playlist-item:hover {
            background: rgba(100, 100, 140, 0.8);
            transform: translateX(5px);
        }
        
        .playlist-item.active {
            background: rgba(106, 90, 249, 0.4);
            border-color: rgba(106, 90, 249, 0.6);
        }
        
        .playlist-thumbnail {
            width: 80px;
            height: 60px;
            border-radius: 8px;
            overflow: hidden;
            margin-right: 15px;
            flex-shrink: 0;
        }
        
        .playlist-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .playlist-title {
            font-size: 1rem;
            font-weight: 500;
            color: #fff;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 5px;
        }
        
        .playlist-platform-icons {
            display: flex;
            gap: 5px;
            margin-left: 8px;
        }
        
        .playlist-platform-icon {
            font-size: 0.9rem;
        }
        
        /* 播放器样式 */
        .player-container {
            width: 65%;
            padding: 20px;
            display: flex;
            flex-direction: column;
            background: rgba(70, 70, 100, 0.7);
            backdrop-filter: blur(10px);
        }
        
        .video-player-container {
            width: 100%;
            height: 0;
            padding-bottom: 56.25%; /* 16:9 比例 */
            position: relative;
            margin-bottom: 20px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0,0,0,0.4);
        }
        
        .video-player-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
        
        .player-info {
            background: rgba(80, 80, 120, 0.7);
            border-radius: 12px;
            padding: 15px;
            border: 1px solid rgba(255,255,255,0.1);
            margin-top: auto;
            backdrop-filter: blur(5px);
        }
        
        .player-info h4 {
            font-size: 1.2rem;
            color: #6a5af9;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .player-platform-icons {
            display: flex;
            gap: 6px;
            margin-left: 5px;
        }
        
        .player-platform-icon {
            font-size: 1.1rem;
        }
        
        .player-info p {
            color: #eee;
            font-size: 0.95rem;
            margin: 0;
            white-space: pre-line;
        }
        
        /* 响应式调整 */
        @media (min-width: 992px) {
            .video-links {
                grid-template-columns: 1fr 1fr;
                gap: 30px;
            }
            
            .header h1 {
                font-size: 4rem;
            }
            
            .carousel-item img {
                height: 550px;
            }
            
            .video-thumbnail {
                width: 250px;
            }
            
            .video-thumbnail img {
                height: 150px;
            }
        }
        
        @media (max-width: 991px) {
            .player-modal .modal-body {
                flex-direction: column;
                height: auto;
            }
            
            .playlist-container {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid rgba(255,255,255,0.2);
                max-height: 40vh;
            }
            
            .player-container {
                width: 100%;
            }
        }
        
        @media (max-width: 768px) {
            .daily-quote {
                position: relative;
                top: 0;
                left: 0;
                max-width: 100%;
                margin: 0 auto 30px;
            }
            
            .header h1 {
                font-size: 2.5rem;
            }
            
            .video-link {
                flex-direction: column;
            }
            
            .video-thumbnail {
                width: 100%;
            }
            
            .video-thumbnail img {
                height: 180px;
            }
            
            .social-btn, .wechat-btn {
                padding: 15px 25px;
                font-size: 1.1rem;
                min-width: auto; /* 在移动端取消最小宽度限制 */
            }
            
            .carousel-item img {
                height: 300px;
            }
            
            .player-button {
                bottom: 20px;
                right: 20px;
                padding: 12px 20px;
                font-size: 1rem;
            }
            
            .back-to-top {
                bottom: 150px; /* 移动端调整位置 */
                right: 20px;
                width: 50px;
                height: 50px;
                font-size: 1.2rem;
            }
            
            .music-player-btn {
                bottom: 90px; /* 移动端调整位置 */
                right: 20px;
                width: 50px;
                height: 50px;
                font-size: 1.2rem;
            }
            
            .music-control-card {
                bottom: 150px;
                right: 20px;
                width: 280px;
            }
            
            .playlist-item {
                padding: 10px;
            }
            
            .playlist-thumbnail {
                width: 70px;
                height: 50px;
                margin-right: 12px;
            }
            
            .platform-icons, .playlist-platform-icons, .player-platform-icons {
                gap: 4px;
            }
            
            .platform-icon, .playlist-platform-icon, .player-platform-icon {
                font-size: 0.9rem;
            }
            
            .top-info-bar {
                position: relative;
                top: 0;
                right: 0;
                max-width: 100%;
                margin: 0 auto 30px;
                align-items: center;
            }
            
            .current-time, .weather-info {
                text-align: center;
            }
            
            .wechat-popover {
                width: 160px;
            }
        }
    </style>
</head>
<body>
    <!-- 每日一言组件 -->
    <div class="daily-quote" id="dailyQuote">
        <div class="quote-title">
            <i class="fas fa-quote-left"></i>每日一言
        </div>
        <div class="quote-content" id="quoteContent">正在加载每日一言...</div>
        <button class="quote-refresh" id="refreshQuote">
            <i class="fas fa-sync-alt"></i>换一句
        </button>
    </div>
    
    <!-- 顶部信息栏 -->
    <div class="top-info-bar">
        <div class="current-time" id="currentTime">2025-10-06 08:33</div>
        <div class="weather-info" id="weatherInfo">
            <div class="weather-icon">
                <img src="https://assets.msn.cn/weathermapdata/1/static/weather/Icons/taskbar_v10/Condition_Card/SunnyDayV3.svg" alt="天气图标">
            </div>
            <div class="weather-details">
                <div class="weather-location">未获取到信息</div>
                <div class="weather-temp">--℃</div>
            </div>
        </div>
    </div>
    
    <!-- 音乐控制卡片 -->
    <div class="music-control-card" id="musicControlCard">
        <div class="music-control-header">
            <div class="music-control-title">背景音乐</div>
            <button class="close-music-card" id="closeMusicCard">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <div class="music-info">
            <div class="music-cover">
                <i class="fas fa-music"></i>
            </div>
            <div class="music-details">
                <div class="music-name" id="currentTrackName">起风了（钢琴版）</div>
                <div class="music-artist" id="currentTrackArtist">十一w✨</div>
            </div>
        </div>
        
        <div class="music-controls">
            <div class="control-buttons">
                <button class="control-btn prev-btn" id="prevTrackBtn">
                    <i class="fas fa-step-backward"></i>
                </button>
                <button class="control-btn play-pause-btn" id="playPauseBtn">
                    <i class="fas fa-play" id="playIcon"></i>
                    <i class="fas fa-pause" id="pauseIcon" style="display: none;"></i>
                </button>
                <button class="control-btn next-btn" id="nextTrackBtn">
                    <i class="fas fa-step-forward"></i>
                </button>
            </div>
            
            <div class="volume-control">
                <i class="fas fa-volume-up volume-icon"></i>
                <input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.1" value="1">
            </div>
        </div>
    </div>
    
    <!-- 播放器按钮 -->
    <button class="player-button" data-bs-toggle="modal" data-bs-target="#playerModal" id="launchPlayerBtn">
        <i class="fas fa-play-circle"></i> 播放视频
    </button>
    
    <!-- 返回顶部按钮 - 现在在音乐按钮上方 -->
    <button class="back-to-top" id="backToTopBtn">
        <i class="fas fa-arrow-up"></i>
    </button>
    
    <!-- 音乐播放器按钮 - 现在在返回顶部按钮下方 -->
    <button class="music-player-btn" id="musicPlayerBtn">
        <i class="fas fa-play"></i>
        <i class="fas fa-pause"></i>
        <span class="music-tooltip">背景音乐</span>
    </button>
    
    <div class="container">
        <div class="header">
            <img src="https://youke1.picui.cn/s1/2025/10/06/68e2f8cb8bf22.jpeg" alt="网站图标" style="width: 80px; height: 80px; border-radius: 50%; margin-bottom: 20px;">
            <h1>
                张皓然的作品
            </h1>
            <p>视觉创作 · 影像艺术 · 精彩瞬间</p>
        </div>
        
        <!-- 搜索功能 -->
        <div class="search-container">
            <div class="search-box">
                <input type="text" id="searchInput" placeholder="搜索视频标题或描述...">
                <button id="searchButton"><i class="fas fa-search"></i> 搜索</button>
            </div>
            <div class="search-results">
                找到 <span id="resultsCount">6</span> 个视频
            </div>
        </div>
        
        <!-- 轮播图区域 -->
        <div class="carousel-section">
            <div class="card-panel">
                <h3 class="section-title">
                    <i class="fas fa-photo-video"></i>视频展示
                </h3>
                
                <div id="videoCarousel" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#videoCarousel" data-bs-slide-to="0" class="active"></button>
                        <button type="button" data-bs-target="#videoCarousel" data-bs-slide-to="1"></button>
                        <button type="button" data-bs-target="#videoCarousel" data-bs-slide-to="2"></button>
                        <button type="button" data-bs-target="#videoCarousel" data-bs-slide-to="3"></button>
                        <button type="button" data-bs-target="#videoCarousel" data-bs-slide-to="4"></button>
                        <button type="button" data-bs-target="#videoCarousel" data-bs-slide-to="5"></button>
                    </div>
                    
                    <div class="carousel-inner">
                        <!-- 视频1 -->
                        <div class="carousel-item active">
                            <a href="https://www.bilibili.com/video/BV1bb3izbEDk/?spm_id_from=333.1387.homepage.video_card.click" target="_blank">
                                <img src="https://youke1.picui.cn/s1/2025/10/05/68e2798edac66.jpeg" 
                                     class="d-block w-100" 
                                     alt="#张家界#永定区 视频封面">
                            </a>
                            <div class="carousel-caption">
                                <h5>#张家界#永定区</h5>
                            </div>
                        </div>
                        
                        <!-- 视频2：重庆长江索道 -->
                        <div class="carousel-item">
                            <a href="https://www.bilibili.com/video/BV1dc3Ez9EqF/?spm_id_from=333.1387.homepage.video_card.click" target="_blank">
                                <img src="https://youke1.picui.cn/s1/2025/10/05/68e2798dcd900.jpeg" 
                                     class="d-block w-100" 
                                     alt="#重庆#长江索道 视频封面">
                            </a>
                            <div class="carousel-caption">
                                <h5>#重庆#长江索道</h5>
                            </div>
                        </div>
                        
                        <!-- 视频3：日落张家界 -->
                        <div class="carousel-item">
                            <a href="https://www.bilibili.com/video/BV16j3JzYEjG/?spm_id_from=333.1387.homepage.video_card.click" target="_blank">
                                <img src="https://youke1.picui.cn/s1/2025/10/05/68e2798e4ce1c.jpeg" 
                                     class="d-block w-100" 
                                     alt="#日落#张家界 视频封面">
                            </a>
                            <div class="carousel-caption">
                                <h5>#日落#张家界</h5>
                            </div>
                        </div>
                        
                        <!-- 视频4 -->
                        <div class="carousel-item">
                            <a href="https://www.bilibili.com/video/BV1MB37z6EcT/?spm_id_from=333.1387.homepage.video_card.click" target="_blank">
                                <img src="https://youke1.picui.cn/s1/2025/10/05/68e2798d9c524.jpeg" 
                                     class="d-block w-100" 
                                     alt="#李子坝#重庆 视频封面">
                            </a>
                            <div class="carousel-caption">
                                <h5>#李子坝#重庆</h5>
                            </div>
                        </div>
                        
                        <!-- 视频5 -->
                        <div class="carousel-item">
                            <a href="https://www.bilibili.com/video/BV1tq37z3Et7/?spm_id_from=333.1387.homepage.video_card.click" target="_blank">
                                <img src="https://youke1.picui.cn/s1/2025/10/05/68e2798df3481.jpeg" 
                                     class="d-block w-100" 
                                     alt="#重庆#李子坝 视频封面">
                            </a>
                            <div class="carousel-caption">
                                <h5>#重庆#李子坝</h5>
                            </div>
                        </div>
                        
                        <!-- 视频6：抖音视频 - 过年烟花 -->
                        <div class="carousel-item">
                            <a href="https://www.douyin.com/user/MS4wLjABAAAAOYg4GYkFW37Rg62PW4qcqfLgBWPmUezFEoG9y-j-sHY?from_tab_name=main&modal_id=7464933139094293810" target="_blank">
                                <img src="https://youke1.picui.cn/s1/2025/10/06/68e2fe2a84275.png" 
                                     class="d-block w-100" 
                                     alt="#过年#烟花 视频封面">
                            </a>
                            <div class="carousel-caption">
                                <h5>#过年 #烟花</h5>
                            </div>
                        </div>
                    </div>
                    
                    <button class="carousel-control-prev" type="button" data-bs-target="#videoCarousel" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                        <span class="visually-hidden">上一个</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#videoCarousel" data-bs-slide="next">
                        <span class="carousel-control-next-icon"></span>
                        <span class="visually-hidden">下一个</span>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 视频链接区域 -->
        <div class="video-links-section">
            <div class="card-panel">
                <h3 class="section-title">
                    <i class="fas fa-link"></i>视频链接
                </h3>
                
                <div class="video-links" id="videoLinksContainer">
                    <!-- 左栏 -->
                    <div class="video-link" data-title="张家界永定区" data-desc="探索张家界永定区的自然奇观与人文风情">
                        <div class="video-thumbnail">
                            <img src="https://youke1.picui.cn/s1/2025/10/05/68e2798edac66.jpeg" 
                                 alt="#张家界#永定区 视频封面">
                            <div class="play-icon">
                                <i class="fas fa-play-circle"></i>
                            </div>
                        </div>
                        <div class="video-info">
                            <h4>#张家界#永定区
                                <div class="platform-icons">
                                    <i class="fab fa-bilibili platform-icon bilibili-icon" title="B站"></i>
                                    <i class="fab fa-tiktok platform-icon douyin-icon" title="抖音"></i>
                                    <i class="fab fa-weibo platform-icon weibo-icon" title="微博"></i>
                                    <i class="fab fa-weixin platform-icon wechat-icon" title="微信视频号"></i>
                                </div>
                            </h4>
                            <p>探索张家界永定区的自然奇观与人文风情</p>
                            <a href="https://www.bilibili.com/video/BV1bb3izbEDk/?spm_id_from=333.1387.homepage.video_card.click" target="_blank">
                                观看视频
                            </a>
                        </div>
                    </div>
                    
                    <div class="video-link" data-title="重庆长江索道" data-desc="体验重庆特色交通，俯瞰长江两岸风光">
                        <div class="video-thumbnail">
                            <img src="https://youke1.picui.cn/s1/2025/10/05/68e2798dcd900.jpeg" 
                                 alt="#重庆#长江索道 视频封面">
                            <div class="play-icon">
                                <i class="fas fa-play-circle"></i>
                            </div>
                        </div>
                        <div class="video-info">
                            <h4>#重庆#长江索道
                                <div class="platform-icons">
                                    <i class="fab fa-bilibili platform-icon bilibili-icon" title="B站"></i>
                                    <i class="fab fa-tiktok platform-icon douyin-icon" title="抖音"></i>
                                    <i class="fab fa-weibo platform-icon weibo-icon" title="微博"></i>
                                    <i class="fab fa-weixin platform-icon wechat-icon" title="微信视频号"></i>
                                </div>
                            </h4>
                            <p>体验重庆特色交通，俯瞰长江两岸风光</p>
                            <a href="https://www.bilibili.com/video/BV1dc3Ez9EqF/?spm_id_from=333.1387.homepage.video_card.click" target="_blank">
                                观看视频
                            </a>
                        </div>
                    </div>
                    
                    <div class="video-link" data-title="日落张家界" data-desc="张家界绝美日落，感受大自然的壮丽与宁静">
                        <div class="video-thumbnail">
                            <img src="https://youke1.picui.cn/s1/2025/10/05/68e2798e4ce1c.jpeg" 
                                 alt="#日落#张家界 视频封面">
                            <div class="play-icon">
                                <i class="fas fa-play-circle"></i>
                            </div>
                        </div>
                        <div class="video-info">
                            <h4>#日落#张家界
                                <div class="platform-icons">
                                    <i class="fab fa-bilibili platform-icon bilibili-icon" title="B站"></i>
                                    <i class="fab fa-tiktok platform-icon douyin-icon" title="抖音"></i>
                                    <i class="fab fa-weixin platform-icon wechat-icon" title="微信视频号"></i>
                                </div>
                            </h4>
                            <p>张家界绝美日落，感受大自然的壮丽与宁静</p>
                            <a href="https://www.bilibili.com/video/BV16j3JzYEjG/?spm_id_from=333.1387.homepage.video_card.click" target="_blank">
                                观看视频
                            </a>
                        </div>
                    </div>
                    
                    <!-- 右栏 -->
                    <div class="video-link" data-title="李子坝重庆" data-desc="穿越居民楼的轻轨，重庆特色交通景观">
                        <div class="video-thumbnail">
                            <img src="https://youke1.picui.cn/s1/2025/10/05/68e2798d9c524.jpeg" 
                                 alt="#李子坝#重庆 视频封面">
                            <div class="play-icon">
                                <i class="fas fa-play-circle"></i>
                            </div>
                        </div>
                        <div class="video-info">
                            <h4>#李子坝#重庆
                                <div class="platform-icons">
                                    <i class="fab fa-bilibili platform-icon bilibili-icon" title="B站"></i>
                                    <i class="fab fa-tiktok platform-icon douyin-icon" title="抖音"></i>
                                    <i class="fab fa-weibo platform-icon weibo-icon" title="微博"></i>
                                    <i class="fab fa-weixin platform-icon wechat-icon" title="微信视频号"></i>
                                </div>
                            </h4>
                            <p>穿越居民楼的轻轨，重庆特色交通景观</p>
                            <a href="https://www.bilibili.com/video/BV1MB37z6EcT/?spm_id_from=333.1387.homepage.video_card.click" target="_blank">
                                观看视频
                            </a>
                        </div>
                    </div>
                    
                    <div class="video-link" data-title="重庆李子坝" data-desc="山城独特风景，李子坝轻轨穿楼奇观">
                        <div class="video-thumbnail">
                            <img src="https://youke1.picui.cn/s1/2025/10/05/68e2798df3481.jpeg" 
                                 alt="#重庆#李子坝 视频封面">
                            <div class="play-icon">
                                <i class="fas fa-play-circle"></i>
                            </div>
                        </div>
                        <div class="video-info">
                            <h4>#重庆#李子坝
                                <div class="platform-icons">
                                    <i class="fab fa-bilibili platform-icon bilibili-icon" title="B站"></i>
                                    <i class="fab fa-tiktok platform-icon douyin-icon" title="抖音"></i>
                                    <i class="fab fa-weixin platform-icon wechat-icon" title="微信视频号"></i>
                                </div>
                            </h4>
                            <p>山城独特风景，李子坝轻轨穿楼奇观</p>
                            <a href="https://www.bilibili.com/video/BV1tq37z3Et7/?spm_id_from=333.1387.homepage.video_card.click" target="_blank">
                                观看视频
                            </a>
                        </div>
                    </div>
                    
                    <!-- 新增抖音视频 -->
                    <div class="video-link" data-title="过年烟花" data-desc="红绸裹着糖瓜粘住旧时光 春联未干，墨香在阶前流淌">
                        <div class="video-thumbnail">
                            <img src="https://youke1.picui.cn/s1/2025/10/06/68e2fe2a84275.png" 
                                 alt="#过年#烟花 视频封面">
                            <div class="play-icon">
                                <i class="fas fa-play-circle"></i>
                            </div>
                        </div>
                        <div class="video-info">
                            <h4>#过年 #烟花
                                <div class="platform-icons">
                                    <i class="fab fa-tiktok platform-icon douyin-icon" title="抖音"></i>
                                    <i class="fab fa-weixin platform-icon wechat-icon" title="微信视频号"></i>
                                </div>
                            </h4>
                            <p>红绸裹着糖瓜粘住旧时光 春联未干，墨香在阶前流淌</p>
                            <a href="https://www.douyin.com/user/MS4wLjABAAAAOYg4GYkFW37Rg62PW4qcqfLgBWPmUezFEoG9y-j-sHY?from_tab_name=main&modal_id=7464933139094293810" target="_blank">
                                观看视频
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 社交媒体和关于作者区域 -->
        <div class="social-section">
            <div class="card-panel">
                <h3 class="section-title">
                    <i class="fas fa-user-circle"></i>社交媒体
                </h3>
                
                <div class="social-buttons">
                    <a href="https://space.bilibili.com/3546835503286361?spm_id_from=333.337.0.0" 
                       class="social-btn bilibili-btn" target="_blank">
                        <i class="fab fa-bilibili"></i>哔哩哔哩主页
                    </a>
                    
                    <a href="https://www.douyin.com/user/MS4wLjABAAAAOYg4GYkFW37Rg62PW4qcqfLgBWPmUezFEoG9y-j-sHY?enter_from=general_search&enter_method=general_search&extra_params=%7B%22search_params%22%3A%7B%22search_result_id%22%3A%22935049372911981%22%2C%22relation_tag%22%3A0%2C%22log_pb%22%3A%7B%22impr_id%22%3A%222025070921213658536B58BC7ADBB9751C%22%7D%2C%22search_type%22%3A%22general%22%2C%22impr_id%22%3A%222025070921213658536B58BC7ADBB9751C%22%2C%22search_id%22%3A%222025070921213658536B58BC7ADBB9751C%22%2C%22search_keyword%22%3A%22%E5%8A%AA%E5%8A%9B%E5%8A%A0%E6%B2%B9%E5%BC%A0%E7%9A%93%E7%84%B6%22%2C%22token_type%22%3A%22discover_list%22%7D%7D&from_tab_name=main" 
                       class="social-btn douyin-btn" target="_blank">
                        <i class="fab fa-tiktok"></i>抖音主页
                    </a>
                    
                    <a href="https://weibo.com/u/7914876134" 
                       class="social-btn weibo-btn" target="_blank">
                        <i class="fab fa-weibo"></i>微博主页
                    </a>
                    
                    <!-- 微信视频号按钮 - 现在尺寸与其他按钮一致 -->
                    <div class="wechat-btn-container">
                        <button class="wechat-btn" id="wechatBtn">
                            <i class="fab fa-weixin"></i>微信视频号
                        </button>
                        <div class="wechat-popover" id="wechatPopover">
                            <img src="https://youke1.picui.cn/s1/2025/10/06/68e3361c3c5cf.jpg" alt="微信视频号二维码" class="wechat-qrcode">
                            <div class="wechat-popover-text">扫码查看</div>
                        </div>
                    </div>
                </div>
                
                <div class="about-author">
                    <h3 class="section-title">
                        <i class="fas fa-star"></i>关于作者
                    </h3>
                    <div class="about-content">
                        <p>
                            业余爱好者，不善于做视频，<br>
                            仅为记录生活中的灵感而创作。
                        </p>
                        <div class="about-icons">
                            <div style="color: #6a5af9;">
                                <i class="fas fa-camera"></i>
                            </div>
                            <div style="color: #d66efd;">
                                <i class="fas fa-video"></i>
                            </div>
                            <div style="color: #ff8ed4;">
                                <i class="fas fa-mountain"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="footer">
            <p>作品均为自制，使用请私信联系</p>
        </div>
    </div>
    
    <!-- 播放器模态框 -->
    <div class="modal fade player-modal" id="playerModal" tabindex="-1" aria-labelledby="playerModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="playerModalLabel">视频播放器</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="playlist-container">
                        <!-- 播放列表项 -->
                        <div class="playlist-item active" data-video-id="0">
                            <div class="playlist-thumbnail">
                                <img src="https://youke1.picui.cn/s1/2025/10/05/68e2798edac66.jpeg" alt="#张家界#永定区">
                            </div>
                            <div class="playlist-title">#张家界#永定区
                                <div class="playlist-platform-icons">
                                    <i class="fab fa-bilibili playlist-platform-icon bilibili-icon" title="B站"></i>
                                    <i class="fab fa-tiktok playlist-platform-icon douyin-icon" title="抖音"></i>
                                    <i class="fab fa-weibo playlist-platform-icon weibo-icon" title="微博"></i>
                                    <i class="fab fa-weixin playlist-platform-icon wechat-icon" title="微信视频号"></i>
                                </div>
                            </div>
                        </div>
                        <div class="playlist-item" data-video-id="1">
                            <div class="playlist-thumbnail">
                                <img src="https://youke1.picui.cn/s1/2025/10/05/68e2798e4ce1c.jpeg" alt="#日落#张家界">
                            </div>
                            <div class="playlist-title">#日落#张家界
                                <div class="playlist-platform-icons">
                                    <i class="fab fa-bilibili playlist-platform-icon bilibili-icon" title="B站"></i>
                                    <i class="fab fa-tiktok playlist-platform-icon douyin-icon" title="抖音"></i>
                                    <i class="fab fa-weixin playlist-platform-icon wechat-icon" title="微信视频号"></i>
                                </div>
                            </div>
                        </div>
                        <div class="playlist-item" data-video-id="2">
                            <div class="playlist-thumbnail">
                                <img src="https://youke1.picui.cn/s1/2025/10/05/68e2798df3481.jpeg" alt="#重庆#李子坝">
                            </div>
                            <div class="playlist-title">#重庆#李子坝
                                <div class="playlist-platform-icons">
                                    <i class="fab fa-bilibili playlist-platform-icon bilibili-icon" title="B站"></i>
                                    <i class="fab fa-tiktok playlist-platform-icon douyin-icon" title="抖音"></i>
                                    <i class="fab fa-weixin playlist-platform-icon wechat-icon" title="微信视频号"></i>
                                </div>
                            </div>
                        </div>
                        <div class="playlist-item" data-video-id="3">
                            <div class="playlist-thumbnail">
                                <img src="https://youke1.picui.cn/s1/2025/10/05/68e2798dcd900.jpeg" alt="#重庆#长江索道">
                            </div>
                            <div class="playlist-title">#重庆#长江索道
                                <div class="playlist-platform-icons">
                                    <i class="fab fa-bilibili playlist-platform-icon bilibili-icon" title="B站"></i>
                                    <i class="fab fa-tiktok playlist-platform-icon douyin-icon" title="抖音"></i>
                                    <i class="fab fa-weibo playlist-platform-icon weibo-icon" title="微博"></i>
                                    <i class="fab fa-weixin playlist-platform-icon wechat-icon" title="微信视频号"></i>
                                </div>
                            </div>
                        </div>
                        <div class="playlist-item" data-video-id="4">
                            <div class="playlist-thumbnail">
                                <img src="https://youke1.picui.cn/s1/2025/10/05/68e2798d9c524.jpeg" alt="#李子坝#重庆">
                            </div>
                            <div class="playlist-title">#李子坝#重庆
                                <div class="playlist-platform-icons">
                                    <i class="fab fa-bilibili playlist-platform-icon bilibili-icon" title="B站"></i>
                                    <i class="fab fa-tiktok playlist-platform-icon douyin-icon" title="抖音"></i>
                                    <i class="fab fa-weibo playlist-platform-icon weibo-icon" title="微博"></i>
                                    <i class="fab fa-weixin playlist-platform-icon wechat-icon" title="微信视频号"></i>
                                </div>
                            </div>
                        </div>
                        <div class="playlist-item" data-video-id="5">
                            <div class="playlist-thumbnail">
                                <img src="https://youke1.picui.cn/s1/2025/10/06/68e2fe2a84275.png" alt="#过年#烟花">
                            </div>
                            <div class="playlist-title">#过年 #烟花
                                <div class="playlist-platform-icons">
                                    <i class="fab fa-tiktok playlist-platform-icon douyin-icon" title="抖音"></i>
                                    <i class="fab fa-weixin playlist-platform-icon wechat-icon" title="微信视频号"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="player-container">
                        <div class="video-player-container">
                            <iframe id="videoPlayer" src="about:blank" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
                        </div>
                        <div class="player-info">
                            <h4 id="currentVideoTitle">#张家界#永定区
                                <div class="player-platform-icons">
                                    <i class="fab fa-bilibili player-platform-icon bilibili-icon" title="B站"></i>
                                    <i class="fab fa-tiktok player-platform-icon douyin-icon" title="抖音"></i>
                                    <i class="fab fa-weibo player-platform-icon weibo-icon" title="微博"></i>
                                    <i class="fab fa-weixin player-platform-icon wechat-icon" title="微信视频号"></i>
                                </div>
                            </h4>
                            <p id="currentVideoDesc">探索张家界永定区的自然奇观与人文风情</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 背景音乐元素 - 现在有两个音乐轮流播放 -->
    <audio id="backgroundMusic1" preload="auto">
        <source src="http://cdn5.lizhi.fm/audio/2018/03/11/2657596658517643270_sd.m4a" type="audio/mp4">
        您的浏览器不支持音频元素。
    </audio>
    
    <audio id="backgroundMusic2" preload="auto">
        <source src="http://m801.music.126.net/20251008101935/30a6f2212e3758938695af05694d4a81/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/8092100521/8808/7af6/bd34/be14e6e6ca51122b12b0fb675b5ea734.mp3?vuutv=qvxzUrfAoqubB3jKIZs0DRZLGy7UpdodeChfjRXfnlr594WSA6zzgwX2h+jfTmQjkVtyYywx/HpDSJ+U7U67cS4Vpwy9Fb693RZVBHDZ+JdcEzkRy5D589LyLdJQ1KAukBDIJHU9Et1aHGgLXpbsuA==&cdntag=bWFyaz1vc193ZWIscXVhbGl0eV9zdGFuZGFyZA==" type="audio/mpeg">
        您的浏览器不支持音频元素。
    </audio>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 全局变量
        let wasMusicPlaying = false;
        let musicAutoPlayed = false;
        let currentMusicIndex = 0; // 当前播放的音乐索引
        const musicTracks = [
            {
                element: document.getElementById('backgroundMusic1'),
                name: "起风了（钢琴版）",
                artist: "十一w✨"
            },
            {
                element: document.getElementById('backgroundMusic2'),
                name: "Track in Time(纯钢琴)（翻自 Dennis Kuo）",
                artist: "精神感染体"
            }
        ];
        
        // 页面加载完成后初始化功能
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化每日一言
            fetchDailyQuote();
            
            // 初始化时间显示
            updateTime();
            setInterval(updateTime, 60000); // 每分钟更新一次
            
            // 获取天气信息
            fetchWeather();
            
            // 初始化微信按钮
            setupWechatButton();
            
            // 轮播初始化
            const myCarousel = document.getElementById('videoCarousel');
            const carousel = new bootstrap.Carousel(myCarousel, {
                interval: 5000,
                wrap: true
            });
            
            // 添加视频链接点击效果
            document.querySelectorAll('.video-link').forEach(link => {
                link.addEventListener('click', function(e) {
                    if (!e.target.matches('a')) {
                        this.querySelector('a').click();
                    }
                });
            });
            
            // 初始化搜索功能
            setupSearch();
            
            // 初始化播放器功能
            setupPlayer();
            
            // 初始化音乐播放器
            setupMusicPlayer();
            
            // 初始化返回顶部功能
            setupBackToTop();
            
            // 每日一言刷新按钮
            document.getElementById('refreshQuote').addEventListener('click', fetchDailyQuote);
            
            // 尝试自动播放背景音乐
            tryAutoPlayMusic();
        });
        
        // 尝试自动播放背景音乐
        function tryAutoPlayMusic() {
            // 尝试自动播放当前音乐
            const currentMusic = musicTracks[currentMusicIndex];
            
            currentMusic.element.play().then(() => {
                console.log('背景音乐自动播放成功');
                document.getElementById('musicPlayerBtn').classList.add('playing');
                updateMusicInfo();
                updatePlayPauseIcons(true);
                musicAutoPlayed = true;
                
                // 设置音乐结束时的切换
                currentMusic.element.addEventListener('ended', switchToNextMusic);
            }).catch(error => {
                console.log('背景音乐自动播放失败，等待用户交互:', error);
                
                // 添加页面点击事件来触发音乐播放
                document.addEventListener('click', function startMusicOnInteraction() {
                    if (!musicAutoPlayed) {
                        currentMusic.element.play().then(() => {
                            console.log('通过用户交互成功播放背景音乐');
                            document.getElementById('musicPlayerBtn').classList.add('playing');
                            updateMusicInfo();
                            updatePlayPauseIcons(true);
                            musicAutoPlayed = true;
                            
                            // 设置音乐结束时的切换
                            currentMusic.element.addEventListener('ended', switchToNextMusic);
                        }).catch(err => {
                            console.error('用户交互后播放失败:', err);
                        });
                        
                        // 移除事件监听器，避免重复执行
                        document.removeEventListener('click', startMusicOnInteraction);
                    }
                });
            });
        }
        
        // 切换到下一首音乐
        function switchToNextMusic() {
            // 停止当前音乐
            const currentMusic = musicTracks[currentMusicIndex];
            currentMusic.element.pause();
            currentMusic.element.currentTime = 0;
            
            // 切换到下一首
            currentMusicIndex = (currentMusicIndex + 1) % musicTracks.length;
            const nextMusic = musicTracks[currentMusicIndex];
            
            // 播放下一首
            nextMusic.element.play().then(() => {
                console.log('切换到下一首背景音乐');
                updateMusicInfo();
                updatePlayPauseIcons(true); // 修复：确保切换到下一首时更新播放状态
                
                // 设置新音乐结束时的切换
                nextMusic.element.addEventListener('ended', switchToNextMusic);
            }).catch(error => {
                console.error('切换音乐失败:', error);
            });
        }
        
        // 切换到上一首音乐
        function switchToPrevMusic() {
            // 停止当前音乐
            const currentMusic = musicTracks[currentMusicIndex];
            currentMusic.element.pause();
            currentMusic.element.currentTime = 0;
            
            // 切换到上一首
            currentMusicIndex = (currentMusicIndex - 1 + musicTracks.length) % musicTracks.length;
            const prevMusic = musicTracks[currentMusicIndex];
            
            // 播放上一首
            prevMusic.element.play().then(() => {
                console.log('切换到上一首背景音乐');
                updateMusicInfo();
                updatePlayPauseIcons(true); // 修复：确保切换到上一首时更新播放状态
                
                // 设置新音乐结束时的切换
                prevMusic.element.addEventListener('ended', switchToNextMusic);
            }).catch(error => {
                console.error('切换音乐失败:', error);
            });
        }
        
        // 更新音乐信息显示
        function updateMusicInfo() {
            const musicName = document.getElementById('currentTrackName');
            const musicArtist = document.getElementById('currentTrackArtist');
            musicName.textContent = musicTracks[currentMusicIndex].name;
            musicArtist.textContent = musicTracks[currentMusicIndex].artist;
        }
        
        // 更新播放/暂停图标
        function updatePlayPauseIcons(isPlaying) {
            const playIcon = document.getElementById('playIcon');
            const pauseIcon = document.getElementById('pauseIcon');
            const musicPlayerBtn = document.getElementById('musicPlayerBtn');
            
            if (isPlaying) {
                playIcon.style.display = 'none';
                pauseIcon.style.display = 'block';
                musicPlayerBtn.classList.add('playing');
            } else {
                playIcon.style.display = 'block';
                pauseIcon.style.display = 'none';
                musicPlayerBtn.classList.remove('playing');
            }
        }
        
        // 音乐播放器功能
        function setupMusicPlayer() {
            const musicPlayerBtn = document.getElementById('musicPlayerBtn');
            const playerModal = document.getElementById('playerModal');
            const musicControlCard = document.getElementById('musicControlCard');
            const closeMusicCard = document.getElementById('closeMusicCard');
            const playPauseBtn = document.getElementById('playPauseBtn');
            const prevTrackBtn = document.getElementById('prevTrackBtn');
            const nextTrackBtn = document.getElementById('nextTrackBtn');
            const volumeSlider = document.getElementById('volumeSlider');
            
            // 音乐播放/暂停功能
            musicPlayerBtn.addEventListener('click', function() {
                toggleMusicPlayback();
            });
            
            // 显示/隐藏音乐控制卡片
            musicPlayerBtn.addEventListener('click', function() {
                musicControlCard.classList.toggle('show');
            });
            
            // 关闭音乐控制卡片
            closeMusicCard.addEventListener('click', function() {
                musicControlCard.classList.remove('show');
            });
            
            // 卡片内的播放/暂停按钮
            playPauseBtn.addEventListener('click', function() {
                toggleMusicPlayback();
            });
            
            // 上一首按钮
            prevTrackBtn.addEventListener('click', function() {
                switchToPrevMusic();
            });
            
            // 下一首按钮
            nextTrackBtn.addEventListener('click', function() {
                switchToNextMusic();
            });
            
            // 音量控制
            volumeSlider.addEventListener('input', function() {
                const volume = this.value;
                musicTracks.forEach(track => {
                    track.element.volume = volume;
                });
            });
            
            // 监听视频播放器模态框事件
            playerModal.addEventListener('show.bs.modal', function () {
                // 保存当前音乐播放状态
                const currentMusic = musicTracks[currentMusicIndex];
                wasMusicPlaying = !currentMusic.element.paused;
                
                // 暂停背景音乐
                if (wasMusicPlaying) {
                    currentMusic.element.pause();
                    updatePlayPauseIcons(false);
                }
            });
            
            playerModal.addEventListener('hide.bs.modal', function () {
                // 如果之前音乐在播放，则恢复播放
                if (wasMusicPlaying) {
                    const currentMusic = musicTracks[currentMusicIndex];
                    currentMusic.element.play().then(() => {
                        updatePlayPauseIcons(true);
                    }).catch(error => {
                        console.error('恢复播放失败:', error);
                    });
                }
            });
            
            // 点击页面其他地方关闭音乐卡片
            document.addEventListener('click', function(event) {
                if (!musicControlCard.contains(event.target) && 
                    !musicPlayerBtn.contains(event.target) &&
                    musicControlCard.classList.contains('show')) {
                    musicControlCard.classList.remove('show');
                }
            });
        }
        
        // 切换音乐播放/暂停
        function toggleMusicPlayback() {
            const currentMusic = musicTracks[currentMusicIndex];
            
            if (currentMusic.element.paused) {
                currentMusic.element.play().then(() => {
                    updatePlayPauseIcons(true);
                }).catch(error => {
                    console.error('播放失败:', error);
                    alert('背景音乐播放失败，请检查浏览器设置或网络连接。');
                });
            } else {
                currentMusic.element.pause();
                updatePlayPauseIcons(false);
            }
        }
        
        // 返回顶部功能
        function setupBackToTop() {
            const backToTopBtn = document.getElementById('backToTopBtn');
            const screenHeight = window.innerHeight;
            
            // 监听滚动事件
            window.addEventListener('scroll', function() {
                if (window.scrollY > screenHeight) {
                    backToTopBtn.classList.add('show');
                } else {
                    backToTopBtn.classList.remove('show');
                }
            });
            
            // 点击按钮返回顶部
            backToTopBtn.addEventListener('click', function() {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
        }
        
        // 每日一言功能
        function fetchDailyQuote() {
            const quoteContent = document.getElementById('quoteContent');
            
            // 显示加载状态
            quoteContent.textContent = '正在加载每日一言...';
            
            // 使用新的API获取每日一言
            fetch('https://uapis.cn/api/say')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应不正常');
                    }
                    return response.text(); // 新API直接返回文本内容
                })
                .then(quote => {
                    // 直接使用返回的文本作为内容
                    quoteContent.textContent = quote;
                })
                .catch(error => {
                    console.error('获取每日一言失败:', error);
                    quoteContent.textContent = '获取每日一言失败，请稍后重试';
                    
                    // 备用方案：使用默认名言
                    setTimeout(() => {
                        const fallbackQuotes = [
                            "生活不止眼前的苟且，还有诗和远方的田野。",
                            "成功的秘诀在于对目标的执着追求。",
                            "每一天都是新的开始，把握当下，创造未来。",
                            "坚持就是胜利，不要轻言放弃。",
                            "梦想不会逃跑，会逃跑的永远都是自己。"
                        ];
                        const randomQuote = fallbackQuotes[Math.floor(Math.random() * fallbackQuotes.length)];
                        quoteContent.textContent = randomQuote;
                    }, 2000);
                });
        }
        
        // 时间显示功能
        function updateTime() {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            
            const timeString = `${year}-${month}-${day} ${hours}:${minutes}`;
            document.getElementById('currentTime').textContent = timeString;
        }
        
        // 天气功能
        async function fetchWeather() {
            try {
                // 使用心知天气API获取天气数据
                const response = await fetch('https://api.seniverse.com/v3/weather/now.json?key=SAfGmI-uzb0eBv4xb&location=zhangjiajie&language=zh-Hans&unit=c');
                
                if (!response.ok) {
                    throw new Error('天气API请求失败');
                }
                
                const data = await response.json();
                
                // 检查API返回状态
                if (!data.results || data.results.length === 0) {
                    throw new Error('天气API返回数据为空');
                }
                
                // 更新天气信息
                const weatherInfo = document.getElementById('weatherInfo');
                const weatherIcon = weatherInfo.querySelector('.weather-icon img');
                const weatherLocation = weatherInfo.querySelector('.weather-location');
                const weatherTemp = weatherInfo.querySelector('.weather-temp');
                
                // 设置天气图标
                const weatherCondition = data.results[0].now.text;
                const currentHour = new Date().getHours();
                const isNight = currentHour >= 18 || currentHour < 6; // 晚上6点到早上6点算夜间
                
                let iconUrl = 'https://assets.msn.cn/weathermapdata/1/static/weather/Icons/taskbar_v10/Condition_Card/SunnyDayV3.svg'; // 默认图标
                
                // 更全面的天气图标映射
                if (weatherCondition) {
                    if (weatherCondition.includes('雾')) {
                        iconUrl = 'https://assets.msn.cn/weathermapdata/1/static/weather/Icons/taskbar_v10/Condition_Card/FogV2.svg';
                    } else if (weatherCondition.includes('阴')) {
                        iconUrl = 'https://assets.msn.cn/weathermapdata/1/static/weather/Icons/taskbar_v10/Condition_Card/CloudyV3.svg';
                    } else if (weatherCondition.includes('晴')) {
                        if (isNight) {
                            iconUrl = 'https://assets.msn.cn/weathermapdata/1/static/weather/Icons/taskbar_v10/Condition_Card/ClearNightV3.svg';
                        } else {
                            iconUrl = 'https://assets.msn.cn/weathermapdata/1/static/weather/Icons/taskbar_v10/Condition_Card/SunnyDayV3.svg';
                        }
                    } else if (weatherCondition.includes('多云')) {
                        if (isNight) {
                            iconUrl = 'https://assets.msn.cn/weathermapdata/1/static/weather/Icons/taskbar_v10/Condition_Card/MostlyCloudyNightV2.svg';
                        } else {
                            iconUrl = 'https://assets.msn.cn/weathermapdata/1/static/weather/Icons/taskbar_v10/Condition_Card/MostlyCloudyDayV2.svg';
                        }
                    } else if (weatherCondition.includes('云')) {
                        iconUrl = 'https://assets.msn.cn/weathermapdata/1/static/weather/Icons/taskbar_v10/Condition_Card/MostlyCloudyDayV2.svg';
                    } else if (weatherCondition.includes('雨')) {
                        iconUrl = 'https://assets.msn.cn/weathermapdata/1/static/weather/Icons/taskbar_v10/Condition_Card/LightRainV3.svg';
                    } else if (weatherCondition.includes('雪')) {
                        iconUrl = 'https://assets.msn.cn/weathermapdata/1/static/trend/Snow.svg';
                    } else if (weatherCondition.includes('雷')) {
                        iconUrl = 'https://assets.msn.cn/weathermapdata/1/static/weather/Icons/taskbar_v10/Condition_Card/ThunderstormV3.svg';
                    }
                }
                
                weatherIcon.src = iconUrl;
                weatherIcon.alt = weatherCondition || '天气图标';
                
                // 设置位置和温度
                weatherLocation.textContent = '湖南，张家界';
                weatherTemp.textContent = `${weatherCondition} ${data.results[0].now.temperature}℃`;
                
            } catch (error) {
                console.error('获取天气信息失败:', error);
                // 如果API请求失败，显示默认信息
                const weatherInfo = document.getElementById('weatherInfo');
                weatherInfo.innerHTML = `
                    <div class="weather-icon">
                        <img src="https://assets.msn.cn/weathermapdata/1/static/weather/Icons/taskbar_v10/Condition_Card/SunnyDayV3.svg" alt="天气图标">
                    </div>
                    <div class="weather-details">
                        <div class="weather-location">未获取到信息</div>
                        <div class="weather-temp">--℃</div>
                    </div>
                `;
            }
        }
        
        // 微信按钮功能
        function setupWechatButton() {
            const wechatBtn = document.getElementById('wechatBtn');
            const wechatPopover = document.getElementById('wechatPopover');
            
            // 点击按钮时显示/隐藏气泡
            wechatBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                wechatPopover.style.display = wechatPopover.style.display === 'block' ? 'none' : 'block';
            });
            
            // 点击页面其他区域时隐藏气泡
            document.addEventListener('click', function() {
                wechatPopover.style.display = 'none';
            });
            
            // 阻止气泡内部的点击事件冒泡
            wechatPopover.addEventListener('click', function(e) {
                e.stopPropagation();
            });
        }
        
        // 搜索功能
        function setupSearch() {
            const searchInput = document.getElementById('searchInput');
            const searchButton = document.getElementById('searchButton');
            const videoLinks = document.querySelectorAll('.video-link');
            const resultsCount = document.getElementById('resultsCount');
            
            function performSearch() {
                const searchTerm = searchInput.value.toLowerCase().trim();
                let visibleCount = 0;
                
                videoLinks.forEach(video => {
                    const title = video.dataset.title.toLowerCase();
                    const desc = video.dataset.desc.toLowerCase();
                    
                    if (searchTerm === '' || title.includes(searchTerm) || desc.includes(searchTerm)) {
                        video.style.display = 'flex';
                        visibleCount++;
                    } else {
                        video.style.display = 'none';
                    }
                });
                
                resultsCount.textContent = visibleCount;
            }
            
            searchButton.addEventListener('click', performSearch);
            searchInput.addEventListener('keyup', (e) => {
                if (e.key === 'Enter') {
                    performSearch();
                }
            });
        }
        
        // 播放器功能
        function setupPlayer() {
            const playerModal = document.getElementById('playerModal');
            let videoPlayer = document.getElementById('videoPlayer');
            const playlistItems = document.querySelectorAll('.playlist-item');
            const currentVideoTitle = document.getElementById('currentVideoTitle');
            const currentVideoDesc = document.getElementById('currentVideoDesc');
            
            let currentVideoId = 0;
            
            // 当模态框显示时，加载第一个视频
            playerModal.addEventListener('shown.bs.modal', function () {
                // 确保在用户主动打开后才加载视频
                if (videoPlayer.src === 'about:blank') {
                    loadVideo(currentVideoId);
                }
            });
            
            // 当模态框被关闭时，清空视频源以彻底停止播放
            playerModal.addEventListener('hide.bs.modal', function () {
                // 清空src属性，立即停止播放并卸载播放器
                videoPlayer.src = 'about:blank';
            });
            
            // 点击播放列表项切换视频
            playlistItems.forEach(item => {
                item.addEventListener('click', function() {
                    const videoId = parseInt(this.getAttribute('data-video-id'));
                    
                    // 更新活动状态
                    playlistItems.forEach(item => item.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 加载新视频
                    loadVideo(videoId);
                });
            });
            
            // 加载视频函数
            function loadVideo(videoId) {
                if (videoId === currentVideoId && videoPlayer.src !== 'about:blank') {
                    return; // 如果已经是当前视频且正在播放，则不重新加载
                }
                
                currentVideoId = videoId;
                const video = videos[videoId];
                const playerContainer = document.querySelector('.video-player-container');
                
                // 更新播放器
                if (video.type === "douyin" && video.iframeCode) {
                    // 对于抖音视频，使用完整的iframe代码
                    playerContainer.innerHTML = video.iframeCode;
                    // 更新对新iframe的引用
                    videoPlayer = playerContainer.querySelector('iframe');
                } else {
                    // 对于B站视频，使用标准的src设置
                    playerContainer.innerHTML = '<iframe id="videoPlayer" src="about:blank" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>';
                    videoPlayer = document.getElementById('videoPlayer');
                    videoPlayer.src = video.embedUrl;
                }
                
                // 更新视频信息
                currentVideoTitle.innerHTML = `${video.title} ${generatePlatformIcons(video.platforms)}`;
                currentVideoDesc.textContent = video.description;
            }
            
            // 生成平台图标HTML
            function generatePlatformIcons(platforms) {
                let iconsHtml = '<div class="player-platform-icons">';
                
                platforms.forEach(platform => {
                    switch(platform) {
                        case 'bilibili':
                            iconsHtml += '<i class="fab fa-bilibili player-platform-icon bilibili-icon" title="B站"></i>';
                            break;
                        case 'douyin':
                            iconsHtml += '<i class="fab fa-tiktok player-platform-icon douyin-icon" title="抖音"></i>';
                            break;
                        case 'weibo':
                            iconsHtml += '<i class="fab fa-weibo player-platform-icon weibo-icon" title="微博"></i>';
                            break;
                        case 'wechat':
                            iconsHtml += '<i class="fab fa-weixin player-platform-icon wechat-icon" title="微信视频号"></i>';
                            break;
                    }
                });
                
                iconsHtml += '</div>';
                return iconsHtml;
            }
        }
        
        // 视频数据定义
        const videos = [
            {
                id: 0,
                title: "#张家界#永定区",
                description: "探索张家界永定区的自然奇观与人文风情",
                thumbnail: "https://youke1.picui.cn/s1/2025/10/05/68e2798edac66.jpeg",
                embedUrl: "//player.bilibili.com/player.html?isOutside=true&aid=114805885113128&bvid=BV1bb3izbEDk&cid=30884037951&p=1",
                platforms: ["bilibili", "douyin", "weibo", "wechat"],
                type: "bilibili"
            },
            {
                id: 1,
                title: "#日落#张家界",
                description: "张家界绝美日落，感受大自然的壮丽与宁静",
                thumbnail: "https://youke1.picui.cn/s1/2025/10/05/68e2798e4ce1c.jpeg",
                embedUrl: "//player.bilibili.com/player.html?isOutside=true&aid=114795114206739&bvid=BV16j3JzYEjG&cid=30851466951&p=1",
                platforms: ["bilibili", "douyin", "wechat"],
                type: "bilibili"
            },
            {
                id: 2,
                title: "#重庆#李子坝",
                description: "山城独特风景，李子坝轻轨穿楼奇观",
                thumbnail: "https://youke1.picui.cn/s1/2025/10/05/68e2798df3481.jpeg",
                embedUrl: "//player.bilibili.com/player.html?isOutside=true&aid=114794057242760&bvid=BV1tq37z3Et7&cid=30846421094&p=1",
                platforms: ["bilibili", "douyin", "wechat"],
                type: "bilibili"
            },
            {
                id: 3,
                title: "#重庆#长江索道",
                description: "体验重庆特色交通，俯瞰长江两岸风光",
                thumbnail: "https://youke1.picui.cn/s1/2025/10/05/68e2798dcd900.jpeg",
                embedUrl: "//player.bilibili.com/player.html?isOutside=true&aid=114793788741931&bvid=BV1dc3Ez9EqF&cid=30845043977&p=1",
                platforms: ["bilibili", "douyin", "weibo", "wechat"],
                type: "bilibili"
            },
            {
                id: 4,
                title: "#李子坝#重庆",
                description: "穿越居民楼的轻轨，重庆特色交通景观",
                thumbnail: "https://youke1.picui.cn/s1/2025/10/05/68e2798d9c524.jpeg",
                embedUrl: "//player.bilibili.com/player.html?isOutside=true&aid=114794040398578&bvid=BV1MB37z6EcT&cid=30846289444&p=1",
                platforms: ["bilibili", "douyin", "weibo", "wechat"],
                type: "bilibili"
            },
            {
                id: 5,
                title: "#过年 #烟花",
                description: `红绸裹着糖瓜粘住旧时光
春联未干，墨香在阶前流淌
母亲将月牙包进面皮褶皱
孩子在廊下试穿新袄
口袋揣满童话形状的爆仗

直到子时绣球抛向天际
碎金便簌簌落满青瓦
有人指认：那是七仙女遗落的银梭
将夜幕织成黎明的锦缎

此刻所有的门扉都在发光
雪地上脚印与车辙重叠成
一朵朵通向春天的
湿润的莲`,
                thumbnail: "https://youke1.picui.cn/s1/2025/10/06/68e2fe2a84275.png",
                embedUrl: "https://open.douyin.com/player/video?vid=7464933139094293810&autoplay=0",
                platforms: ["douyin", "wechat"],
                type: "douyin",
                iframeCode: `<iframe width="3840" height="1646" frameborder="0" src="https://open.douyin.com/player/video?vid=7464933139094293810&autoplay=0" referrerpolicy="unsafe-url" allowfullscreen></iframe>`
            }
        ];
    </script>
</body>
</html>
